<template>
  <div class="reqShow">
    <el-divider content-position="left">服务信息</el-divider>
    <el-form :model="searchForm" label-width="50%" size="mini">
      <el-row :gutter="24" align="center">
        <el-col :span="16">
          <el-form inline size="mini" style="padding-left: 25px">
            <el-form-item label="">
              <el-select v-model.trim="searchForm.method" style="width:80px" filterable>
                <el-option v-for="item in methodList"
                           :key="item.keyc"
                           :label="item.keyc"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="-">
              <el-input v-model="searchForm.svrType" placeholder="协议" style="width: 80px"></el-input>
            </el-form-item>
            <el-form-item label="://">
              <el-input v-model="searchForm.svrIp" placeholder="请输入IP" style="width: 140px"></el-input>
            </el-form-item>
            <el-form-item label=":">
              <el-input v-model="searchForm.svrPort" placeholder="端口" style="width: 80px"></el-input>
            </el-form-item>
            <el-form-item label="/">
              <el-input v-model="searchForm.uri" placeholder="请输入url" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left">请求信息</el-divider>
    <el-tabs v-model="searchForm.tabLabel" type="card" size="mini" @tab-click="optionHandleClick">
      <el-tab-pane label="请求体" name="01">
        <el-row :gutter="24" align="center">
          <el-table :data="tranHistList" ref="multipleTable"
                    style="width: 100%;padding-left: 5px;min-height: 200px;padding-top: 20px" border stripe
                    size="mini"
                    :row-style="{height:'20px'}">
            <el-table-column align="center" prop="select" label="操作" width="80px">
              <template slot-scope="scope">
                <el-dropdown trigger="click" placement="bottom">
                  <el-button type="text" size="mini">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="editTranHistSource(scope.row)">编辑
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                      <el-button size="mini" type="text" class="btn-text-red" icon="el-icon-delete"
                                 @click="handleDelete(scope.$index, scope.row)">删除
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="reference" label="交易参考号" width="250px">
            </el-table-column>
            <el-table-column align="center" prop="glSeqNo" label="业务流水号" width="200px">
            </el-table-column>
            <el-table-column align="center" prop="channelSeqNo" label="渠道流水号" width="250px">
            </el-table-column>
            <el-table-column align="center" prop="tranBranch" label="交易机构">
            </el-table-column>
            <el-table-column align="center" prop="tranDate" label="交易日期" width="100px">
            </el-table-column>
            <el-table-column align="center" prop="effectDate" label="生效日期" width="100px">
            </el-table-column>
            <el-table-column align="center" prop="tranCcy" label="交易币种" width="140px">
            </el-table-column>
            <el-table-column align="center" prop="sourceModule" label="源模块">
            </el-table-column>
            <el-table-column align="center" prop="sourceType" label="渠道类型">
            </el-table-column>
            <el-table-column align="center" prop="eventType" label="事件类型" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="tranType" label="交易类型" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="amtType" label="金额类型">
            </el-table-column>
            <el-table-column align="center" prop="amount" label="金额">
            </el-table-column>
            <el-table-column align="center" prop="baseAcctNo" label="账号" width="200px">
            </el-table-column>
            <el-table-column align="center" prop="branch" label="账户机构">
            </el-table-column>
            <el-table-column align="center" prop="accountingStatus" label="核算状态">
            </el-table-column>
            <el-table-column align="center" prop="profitCentre" label="利润中心">
            </el-table-column>
            <el-table-column align="center" prop="ccy" label="币种" width="140px">
            </el-table-column>
            <el-table-column align="center" prop="clientType" label="客户类型">
            </el-table-column>
            <el-table-column align="center" prop="systemId" label="系统ID">
            </el-table-column>
            <el-table-column align="center" prop="sendSystem" label="发送系统">
            </el-table-column>
            <el-table-column align="center" prop="marketingProd" label="营销产品">
            </el-table-column>
            <el-table-column align="center" prop="busiProd" label="业务产品">
            </el-table-column>
            <el-table-column align="center" prop="reversal" label="是否冲正">
            </el-table-column>
            <el-table-column align="center" prop="narrative" label="摘要" width="300px">
            </el-table-column>
            <el-table-column align="center" prop="subjectCode" label="科目">
            </el-table-column>
            <el-table-column align="center" prop="channelDate" label="渠道日期" width="100px">
            </el-table-column>
            <el-table-column align="center" prop="tranCategory" label="业务类别">
            </el-table-column>
            <el-table-column align="center" prop="spreadPercent" label="拆税比例">
            </el-table-column>
            <el-table-column align="center" prop="company" label="法人" width="200px">
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="系统头" name="02">
        <el-form :model="sysHeadForm" ref="sysHeadForm" label-width="30%" size="mini"
                 style="min-height: 200px;padding-top: 60px">
          <el-row :gutter="24" align="center">
            <el-col :span="6">
              <el-form-item label="服务码：">
                <el-input type="text" v-model="sysHeadForm.serviceCode" style="width:70%"
                          placeholder="请输入serviceCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="消息类型：">
                <el-input type="text" v-model="sysHeadForm.messageType" style="width:70%"
                          placeholder="请输入messageType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="消息码：">
                <el-input type="text" v-model="sysHeadForm.messageCode" style="width:70%"
                          placeholder="请输入messageCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易模式：">
                <el-select v-model="sysHeadForm.tranMode" filterable style="width:70%">
                  <el-option v-for="item in tranModeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                             :value="item.keyc"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" align="center">
            <el-col :span="6">
              <el-form-item label="渠道类型：">
                <el-select v-model="sysHeadForm.sourceType" filterable style="width:70%">
                  <el-option v-for="item in sourceTypeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                             :value="item.keyc"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分支行标识：">
                <el-select v-model="sysHeadForm.branchId" filterable style="width:70%">
                  <el-option v-for="item in branchList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                             :value="item.keyc"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="柜员标识：">
                <el-input type="text" v-model="sysHeadForm.userId" style="width:70%"
                          placeholder="请输入userId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易日期：" filterable prop="tranDate">
                <el-date-picker v-model="sysHeadForm.tranDate"
                                type="date"
                                value-format='yyyyMMdd'
                                format='yyyyMMdd'
                                placeholder="选择日期"
                                style="width:70%;float:left">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="应用头" name="03">
        <el-form :model="appHeadForm" ref="appHeadForm" label-width="30%" size="mini"
                 style="min-height: 200px;padding-top: 50px">
          <el-row :gutter="24" align="center">
            <el-col :span="6">
              <el-form-item label="currentNum：">
                <el-input type="text" v-model="appHeadForm.currentNum" style="width:70%"
                          placeholder="请输入currentNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="pgupOrPgdn：">
                <el-input type="text" v-model="appHeadForm.pgupOrPgdn" style="width:70%"
                          placeholder="请输入pgupOrPgdn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="totalRows：">
                <el-input type="text" v-model="appHeadForm.totalRows" style="width:70%"
                          placeholder="请输入totalRows"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="totalFlag：">
                <el-input type="text" v-model="appHeadForm.totalFlag" style="width:70%"
                          placeholder="请输入totalFlag"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" align="center">
            <el-col :span="6">
              <el-form-item label="pageStart：">
                <el-input type="text" v-model="appHeadForm.pageStart" style="width:70%"
                          placeholder="请输入pageStart"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="pageEnd：">
                <el-input type="text" v-model="appHeadForm.pageEnd" style="width:70%"
                          placeholder="请输入pageEnd"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="totalPages：">
                <el-input type="text" v-model="appHeadForm.totalPages" style="width:70%"
                          placeholder="请输入totalPages"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="totalNum：">
                <el-input type="text" v-model="appHeadForm.totalNum" style="width:70%"
                          placeholder="请输入totalNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-divider></el-divider>
    <el-form label-width="0px" size="mini" align="middle">
      <el-row :gutter="24" align="middle">
        <el-col :span="2" align="center">
          <el-form-item label="">
            <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="add" v-show="showAdd">新 增
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2" align="center">
          <el-form-item label="">
            <el-button type="primary" size="mini" icon="el-icon-s-order" @click="save">保 存</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2" align="center">
          <el-form-item label="">
            <el-button type="primary" size="mini" icon="el-icon-success" @click="send">发 送</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left">反馈信息</el-divider>
    <el-row :gutter="24" align="center">
      <el-input
        type="textarea"
        :autosize="{ minRows: 15, maxRows: 20}"
        placeholder="回显反馈信息"
        v-model="textarea"
      >
      </el-input>
    </el-row>
    <!-- 流水信息弹框 -->
    <el-dialog :model="editDialogForm" :ref="editDialogForm" title="流水信息" :visible.sync=editDialogVisible
               v-loading="false" width="70%"
               center>
      <el-form :model="editDialogForm" ref="editDialogForm" label-width="30%" size="mini">
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="交易参考号：">
              <el-input type="text" v-model="editDialogForm.reference" style="width:100%"
                        placeholder="请输入交易参考号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务流水号：">
              <el-input type="text" v-model="editDialogForm.glSeqNo" style="width:100%"
                        placeholder="请输入业务流水号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道流水号：">
              <el-input type="text" v-model="editDialogForm.channelSeqNo" style="width:100%"
                        placeholder="请输入渠道流水号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="交易日期：" filterable prop="tranDate">
              <el-date-picker v-model="editDialogForm.tranDate"
                              type="date"
                              value-format='yyyyMMdd'
                              format='yyyyMMdd'
                              placeholder="选择日期"
                              style="width:100%;float:left">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生效日期：" filterable prop="effectDate">
              <el-date-picker v-model="editDialogForm.effectDate"
                              type="date"
                              value-format='yyyyMMdd'
                              format='yyyyMMdd'
                              placeholder="选择日期"
                              style="width:100%;float:left">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道日期：" filterable prop="channelDate">
              <el-date-picker v-model="editDialogForm.channelDate"
                              type="date"
                              value-format='yyyyMMdd'
                              format='yyyyMMdd'
                              placeholder="选择日期"
                              style="width:100%;float:left">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="币种：" filterable prop="ccy">
              <el-select v-model="editDialogForm.ccy" filterable style="width:100%">
                <el-option v-for="item in ccyList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易币种：" filterable prop="tranCcy">
              <el-select v-model="editDialogForm.tranCcy" filterable style="width:100%">
                <el-option v-for="item in ccyList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="源模块：" filterable prop="sourceModule">
              <el-select v-model="editDialogForm.sourceModule" filterable style="width:100%">
                <el-option v-for="item in sourceModuleList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="账户机构：" filterable prop="branch">
              <el-select v-model="editDialogForm.branch" filterable style="width:100%">
                <el-option v-for="item in branchList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易机构：" filterable prop="tranBranch">
              <el-select v-model="editDialogForm.tranBranch" filterable style="width:100%">
                <el-option v-for="item in branchList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人：" filterable prop="company">
              <el-select v-model="editDialogForm.company" filterable style="width:100%">
                <el-option v-for="item in companyList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="渠道类型：" filterable prop="sourceType">
              <el-select v-model="editDialogForm.sourceType" filterable style="width:100%">
                <el-option v-for="item in sourceTypeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事件类型：" filterable prop="eventType">
              <el-select v-model="editDialogForm.eventType" filterable style="width:100%">
                <el-option v-for="item in eventMapperList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易类型：" filterable prop="tranType">
              <el-select v-model="editDialogForm.tranType" filterable style="width:100%">
                <el-option v-for="item in tranTypeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="客户类型：" filterable prop="clientType">
              <el-select v-model="editDialogForm.clientType" filterable style="width:100%">
                <el-option v-for="item in cifClientTypeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额类型：" filterable prop="amtType">
              <el-select v-model="editDialogForm.amtType" filterable style="width:100%">
                <el-option v-for="item in amtTypeList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额：" filterable prop="amount">
              <el-input type="text" v-model="editDialogForm.amount" style="width:100%" placeholder="请输入金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="科目：" filterable prop="subjectCode">
              <el-select v-model="editDialogForm.subjectCode" filterable style="width:100%">
                <el-option v-for="item in acSubjectList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拆税比例：" filterable prop="spreadPercent">
              <el-input type="text" v-model="editDialogForm.spreadPercent" style="width:100%"
                        placeholder="请输入拆税比例"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="利润中心：" filterable prop="profitCentre">
              <el-select v-model="editDialogForm.profitCentre" filterable style="width:100%">
                <el-option v-for="item in profitCentreList" :key="item.keyc"
                           :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="核算状态：" filterable prop="accountingStatus">
              <el-select v-model="editDialogForm.accountingStatus" filterable style="width:100%">
                <el-option v-for="item in accountingStatusList" :key="item.keyc"
                           :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系统ID：" filterable prop="systemId">
              <el-select v-model="editDialogForm.systemId" filterable style="width:100%">
                <el-option v-for="item in systemIdPkList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发送系统：" filterable prop="sendSystem">
              <el-select v-model="editDialogForm.sendSystem" filterable style="width:100%">
                <el-option v-for="item in systemIdPkList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="营销产品：" filterable prop="marketingProd">
              <el-select v-model="editDialogForm.marketingProd" filterable style="width:100%">
                <el-option v-for="item in marketingProdList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务产品：" filterable prop="busiProd">
              <el-select v-model="editDialogForm.busiProd" filterable style="width:100%">
                <el-option v-for="item in busiProdList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类别：" filterable prop="tranCategory">
              <el-input type="text" v-model="editDialogForm.tranCategory" style="width:100%"
                        placeholder="请输入业务类别"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" align="center">
          <el-col :span="8">
            <el-form-item label="是否冲正：" filterable prop="reversal">
              <el-select v-model="editDialogForm.reversal" filterable style="width:100%">
                <el-option v-for="item in reversalList" :key="item.keyc" :label="item.keyc + '/' + item.valuec"
                           :value="item.keyc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="摘要：" filterable prop="narrative">
              <el-input type="text" v-model="editDialogForm.narrative" style="width:100%"
                        placeholder="请输入摘要"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号：" filterable prop="baseAcctNo">
              <el-input type="text" v-model="editDialogForm.baseAcctNo" style="width:100%"
                        placeholder="请输入账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '../../constants/Api';
  import axios from '../../axios';
  import { mapState } from 'vuex';
  import { getSelectData } from '../../utils/utils';
  import { SUCCESS_CODE } from '../../constants/constant';

  export default {
    name: 'reqShow',
    data() {
      return {
        searchForm: {
          tabLabel: '01',
          // 请求名称
          reqName: this.$route.params.label,
          // 树节点ID
          reqId: this.$route.params.id,
          // 服务器IP
          svrIp: '',
          // 服务器Port
          svrPort: '',
          // 服务器Url
          uri: '',
          // 模板ID
          tmplId: 'req',
          // 协议类型
          svrType: 'http',
          // 方法
          method: 'post',
        },
        sysHeadForm: {
          serviceCode: 'MbsdAccount',
          messageType: '',
          messageCode: '',
          tranMode: 'ONLINE',
          sourceType: 'GL',
          branchId: '351001',
          userId: 'admin',
          tranDate: '',
          tranTimestamp: new Date().getTime(),
          seqNo: '01',
        },
        appHeadForm: {
          totalNum: '-1',
          pgupOrPgdn: '1',
          totalRows: '',
          totalFlag: 'E',
          pageStart: '',
          pageEnd: '',
          totalPages: '',
          currentNum: '0',
        },
        // 表格数据--流水信息
        tranHistList: [],
        editDialogForm: {
          reference: null,
          glSeqNo: null,
          channelSeqNo: null,
          tranDate: null,
          effectDate: null,
          channelDate: null,
          tranBranch: null,
          ccy: null,
          tranCcy: null,
          sourceModule: null,
          company: null,
          eventType: null,
          tranType: null,
          clientType: null,
          amtType: null,
          subjectCode: null,
          spreadPercent: null,
          profitCentre: null,
          accountingStatus: null,
          sendSystem: null,
          marketingProd: null,
          busiProd: null,
          tranCategory: null,
          reversal: null,
          narrative: null,
          baseAcctNo: null
        },
        // 编辑流水信息弹框
        editDialogVisible: false,
        // 是否是编辑弹出框
        isAddDialog: false,
        // 反馈信息
        textarea: '',
        // 是否展示添加按钮
        showAdd: true,
        // 下拉列表初始化
        branchList: [],
        ccyList: [],
        sourceModuleList: [],
        companyList: [],
        sourceTypeList: [],
        eventMapperList: [],
        tranTypeList: [],
        amtTypeList: [],
        accountingStatusList: [],
        profitCentreList: [],
        systemIdPkList: [],
        acSubjectList: [],
        marketingProdList: [],
        busiProdList: [],
      };
    },
    mounted() {
      const vm = this;
      vm.search();
      vm.getLoadData();
    },
    computed: {
      ...mapState({
        reqTree: state => state.app.reqTree,
        methodList: state => state.staticParamList.methodList,
        reversalList: state => state.staticParamList.reversalList,
        tranModeList: state => state.staticParamList.tranModeList,
        cifClientTypeList: state => state.staticParamList.cifClientTypeList,
      }),
    },
    methods: {
      // 下拉列表查询start
      getLoadData() {
        getSelectData(this, 'FM_BRANCH.BRANCH|BRANCH_SHORT', 'branchList');
        getSelectData(this, 'FM_CURRENCY.CCY|CCY_DESC', 'ccyList');
        getSelectData(this, 'GL_COMPANY.COMPANY|COMPANY_NAME', 'companyList');
        getSelectData(this, 'FM_CHANNEL.CHANNEL|CHANNEL_DESC', 'sourceTypeList');
        getSelectData(this, 'GL_EVENT_MAPPING.EVENT_TYPE|EVENT_TYPE_DESC', 'eventMapperList');
        getSelectData(this, 'GL_SOURCE_MODULE.SOURCE_MODULE|SOURCE_MODULE_DESC', 'sourceModuleList');
        getSelectData(this, 'GL_TRAN_TYPE.TRAN_TYPE|TRAN_TYPE_DESC', 'tranTypeList');
        getSelectData(this, 'GL_AMOUNT_TYPE.AMT_TYPE|AMT_TYPE_DESC', 'amtTypeList');
        getSelectData(this, 'GL_ACCOUNTING_STATUS.ACCOUNTING_STATUS|ACCOUNTING_STATUS_DESC', 'accountingStatusList');
        getSelectData(this, 'FM_PROFIT_CENTRE.PROFIT_CENTRE|PROFIT_CENTRE_DESC', 'profitCentreList');
        getSelectData(this, 'FM_SYSTEM_DEF.SYSTEM_ID|SYSTEM_ID_DESC', 'systemIdPkList');
        getSelectData(this, 'AC_SUBJECT.SUBJECT_CODE|SUBJECT_DESC?subject_type=\'S\'', 'acSubjectList');
        getSelectData(this, 'GL_MARKETING_PROD_TYPE.MARKETING_PROD|MARKETING_PROD_DESC', 'marketingProdList');
        getSelectData(this, 'GL_PROD_MAPPING.MAPPING_TYPE|MAPPING_DESC', 'busiProdList');
      },
      // 下拉列表查询end
      // 编辑流水信息 start
      editTranHistSource(row) {
        const vm = this;
        vm.editDialogVisible = true;
        vm.isAddDialog = false;
        vm.editDialogForm = row;
      },
      add() {
        const vm = this;
        vm.editDialogVisible = true;
        vm.isAddDialog = true;
        // 添加成功初始化editDialogForm
        // vm.$refs.editDialogForm.resetFields()
        vm.editDialogForm.reference = null,
          vm.editDialogForm.glSeqNo = null,
          vm.editDialogForm.channelSeqNo = null,
          vm.editDialogForm.tranDate = null,
          vm.editDialogForm.effectDate = null,
          vm.editDialogForm.channelDate = null,
          vm.editDialogForm.tranBranch = null,
          vm.editDialogForm.ccy = null,
          vm.editDialogForm.tranCcy = null,
          vm.editDialogForm.sourceModule = null,
          vm.editDialogForm.company = null,
          vm.editDialogForm.eventType = null,
          vm.editDialogForm.tranType = null,
          vm.editDialogForm.clientType = null,
          vm.editDialogForm.amtType = null,
          vm.editDialogForm.subjectCode = null,
          vm.editDialogForm.spreadPercent = null,
          vm.editDialogForm.profitCentre = null,
          vm.editDialogForm.accountingStatus = null,
          vm.editDialogForm.sendSystem = null,
          vm.editDialogForm.marketingProd = null,
          vm.editDialogForm.busiProd = null,
          vm.editDialogForm.tranCategory = null,
          vm.editDialogForm.reversal = null,
          vm.editDialogForm.narrative = null,
          vm.editDialogForm.baseAcctNo = null;
      },
      // 编辑流水信息 end
      // 删除流水信息 start
      handleDelete(index) {
        this.tranHistList.splice(index, 1);
      },
      // 删除流水信息 end
      // 编辑流水信息确定按钮事件 start
      handleConfirm() {
        var vm = this;
        if (vm.isAddDialog) {
          vm.tranHistList.push(Object.assign({}, vm.editDialogForm));
        }
        vm.editDialogVisible = false;
        vm.isAddDialog = false;
      },
      // 流水保存按钮事件 start
      save() {
        const vm = this;
        axios.post(Api.updateReq, {
          sysHead: {
            serviceCode: vm.sysHeadForm.serviceCode,
            messageType: vm.sysHeadForm.messageType,
            messageCode: vm.sysHeadForm.messageCode,
            seqNo: '01',
            tranMode: vm.sysHeadForm.tranMode,
            sourceType: vm.sysHeadForm.sourceType,
            branchId: vm.sysHeadForm.branchId,
            userId: vm.sysHeadForm.userId,
            tranDate: vm.sysHeadForm.tranDate,
            tranTimestamp: '20210401',
            userLang: 'CHINESE'
          },
          appHead: {
            totalNum: vm.appHeadForm.totalNum,
            pgupOrPgdn: vm.appHeadForm.pgupOrPgdn,
            totalRows: vm.appHeadForm.totalRows,
            totalFlag: vm.appHeadForm.totalFlag,
            pageStart: vm.appHeadForm.pageStart,
            pageEnd: vm.appHeadForm.pageEnd,
            totalPages: vm.appHeadForm.totalPages,
            currentNum: vm.appHeadForm.currentNum,
          },
          body: {
            reqId: vm.searchForm.reqId,
            tmplId: vm.searchForm.tmplId,
            uri: vm.searchForm.uri,
            svrIp: vm.searchForm.svrIp,
            svrPort: vm.searchForm.svrPort,
            method: vm.searchForm.method,
            svrType: vm.searchForm.svrType,
            tranHistSourceDetail: vm.tranHistList
          }
        })
          .then(res => {
            if (res.code === SUCCESS_CODE) {
              vm.search();
              vm.$message.success('保存成功');
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(function (err) {
              console.log(err);
            }
          );
      },
      // 流水保存按钮事件 end
      // 流水发送按钮事件 start
      send() {
        const vm = this;
        let seqNoTime = new Date().getTime();
        vm.sysHeadForm.seqNo = seqNoTime;
        axios.post(Api.sendReq, {
          sysHead: {
            serviceCode: vm.sysHeadForm.serviceCode,
            messageType: vm.sysHeadForm.messageType,
            messageCode: vm.sysHeadForm.messageCode,
            seqNo: vm.sysHeadForm.seqNo,
            tranMode: vm.sysHeadForm.tranMode,
            sourceType: vm.sysHeadForm.sourceType,
            branchId: vm.sysHeadForm.branchId,
            userId: vm.sysHeadForm.userId,
            tranDate: vm.sysHeadForm.tranDate,
            userLang: 'CHINESE'
          },
          appHead: {
            totalNum: vm.appHeadForm.totalNum,
            pgupOrPgdn: vm.appHeadForm.pgupOrPgdn,
            totalRows: vm.appHeadForm.totalRows,
            totalFlag: vm.appHeadForm.totalFlag,
            pageStart: vm.appHeadForm.pageStart,
            pageEnd: vm.appHeadForm.pageEnd,
            totalPages: vm.appHeadForm.totalPages,
            currentNum: vm.appHeadForm.currentNum,
          },
          body: {
            reqId: vm.searchForm.reqId,
            tmplId: vm.searchForm.tmplId,
            uri: '/' + vm.searchForm.uri,
            svrIp: vm.searchForm.svrIp,
            svrPort: vm.searchForm.svrPort,
            method: vm.searchForm.method,
            svrType: vm.searchForm.svrType,
            tranHistSourceDetail: vm.tranHistList
          }
        })
          .then(res => {
            if (res.code === SUCCESS_CODE) {
              vm.textarea = res.data;
              vm.$message.success('发送成功');
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(function (err) {
              console.log(err);
            }
          );
      },
      // 流水发送按钮事件 end
      // 查询流水信息
      search() {
        const vm = this;
        this.tranHistList = [];
        axios.post(Api.searchReq, {
          sysHead: {
            serviceCode: 'MbsdAccount',
            messageType: '',
            messageCode: ''
          },
          body: {
            reqId: vm.searchForm.reqId
          }
        })
          .then(res => {
            if (res.code !== SUCCESS_CODE) {
              this.$message({
                message: '查询无记录',
                type: 'warning'
              });
            } else {
              vm.tranHistList = JSON.parse(res.data.request.reqInfo).tranHistSourceDetail || [];
              vm.sysHeadForm = JSON.parse(res.data.request.reqInfo).sysHead;
              vm.appHeadForm = JSON.parse(res.data.request.reqInfo).appHead;
              vm.searchForm.reqName = res.data.request.reqName;
              vm.searchForm.tmplId = res.data.request.tmplId;
              vm.searchForm.uri = JSON.parse(res.data.envServer.svrInfo).uri;
              vm.searchForm.method = JSON.parse(res.data.envServer.svrInfo).method;
              vm.searchForm.svrIp = res.data.envServer.svrIp;
              vm.searchForm.svrPort = res.data.envServer.svrPort;
              vm.searchForm.svrType = res.data.envServer.svrType;
              this.$message({
                message: '查询成功',
                type: 'success'
              });
            }
          });
      },
      // 切换tab页签事件start
      optionHandleClick() {
        const vm = this;
        if (vm.searchForm.tabLabel === '01') {
          vm.showAdd = true;
        } else if (vm.searchForm.tabLabel === '02') {
          vm.showAdd = false;
        } else if (vm.searchForm.tabLabel === '03') {
          vm.showAdd = false;
        } else {
          vm.showAdd = false;
        }
      },
      // 切换tab页签事件end
    }
  };
</script>
<style lang='scss' scoped>
  .reqShow {
    padding-top: 15px;
    max-width: 1500px;
    width: 100%;
    border-top: 1px solid #9d9d9d;
    height: 100%;
    line-height: 25px;
    padding-left: 20px;
  }

  .button {
    margin-top: 30px;
  }
</style>

